<script>
	import { flip } from 'svelte/animate';
	import { quintOut } from 'svelte/easing';

	let list = [1, 2, 3, 4];
	function addNumber() {
		list = [...list, list.length + 1];
	}
</script>

<button class="p-5 bg-yellow-300" on:click={addNumber}>添加数字</button>
{#each list as n (n)}
	<div animate:flip={{ delay: 2050, duration: 2000, easing: quintOut }}>{n}</div>
{/each}
